<template>
  <div class="plugin-manage-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🔧 插件管理</span>
          <el-button type="primary" @click="handleCheckUpdate">
            <el-icon><Refresh /></el-icon>
            检查更新
          </el-button>
        </div>
      </template>

      <!-- 已安装插件 -->
      <el-table :data="installedPlugins" border stripe>
        <el-table-column prop="name" label="插件名称" width="200">
          <template #default="{ row }">
            <div class="plugin-name-cell">
              <div class="plugin-icon-small" :style="{ background: row.color }">
                <el-icon :size="24">
                  <component :is="row.icon" />
                </el-icon>
              </div>
              <strong>{{ row.name }}</strong>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip />
        <el-table-column prop="version" label="版本" width="100">
          <template #default="{ row }">
            <el-tag size="small">v{{ row.version }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.enabled" @change="handleToggle(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="installDate" label="安装时间" width="160" />
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleConfig(row)">配置</el-button>
            <el-button link type="success" @click="handleUpdate(row)">更新</el-button>
            <el-button link type="warning" @click="handleReinstall(row)">重装</el-button>
            <el-button link type="danger" @click="handleUninstall(row)">卸载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 插件配置对话框 -->
    <el-dialog v-model="configDialogVisible" :title="`${currentPlugin?.name} - 配置`" width="700px">
      <el-form :model="configForm" label-width="120px" v-if="currentPlugin">
        <el-alert title="插件配置说明" type="info" :closable="false" style="margin-bottom: 20px;">
          <p>根据插件类型配置相应的参数</p>
        </el-alert>

        <el-form-item label="启用状态">
          <el-switch v-model="configForm.enabled" />
        </el-form-item>

        <el-form-item label="API密钥" v-if="currentPlugin.needApiKey">
          <el-input v-model="configForm.apiKey" placeholder="请输入API密钥" show-password />
        </el-form-item>

        <el-form-item label="回调地址" v-if="currentPlugin.needCallback">
          <el-input v-model="configForm.callbackUrl" placeholder="请输入回调地址" />
        </el-form-item>

        <el-form-item label="自动执行">
          <el-switch v-model="configForm.autoRun" />
          <div class="form-tip">开启后插件将自动执行任务</div>
        </el-form-item>

        <el-form-item label="执行频率" v-if="configForm.autoRun">
          <el-select v-model="configForm.frequency">
            <el-option label="每小时" value="hourly" />
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
          </el-select>
        </el-form-item>

        <el-form-item label="通知方式">
          <el-checkbox-group v-model="configForm.notifications">
            <el-checkbox label="email">邮件</el-checkbox>
            <el-checkbox label="sms">短信</el-checkbox>
            <el-checkbox label="app">APP推送</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="高级设置">
          <el-input v-model="configForm.advancedConfig" type="textarea" :rows="4" placeholder="JSON格式配置" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="configDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveConfig">保存配置</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive, markRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, ChatDotRound, DataAnalysis, Tickets } from '@element-plus/icons-vue'

const configDialogVisible = ref(false)
const currentPlugin = ref(null)

const configForm = reactive({
  enabled: true,
  apiKey: '',
  callbackUrl: '',
  autoRun: false,
  frequency: 'daily',
  notifications: ['email'],
  advancedConfig: ''
})

const installedPlugins = ref([
  {
    id: 2,
    name: '数据看板插件',
    description: '实时数据大屏，支持自定义指标、多维度分析',
    version: '2.0.0',
    enabled: true,
    installDate: '2024-01-15 10:30',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: markRaw(DataAnalysis),
    needApiKey: false,
    needCallback: false
  },
  {
    id: 5,
    name: '优惠券营销',
    description: '强大的优惠券营销工具',
    version: '2.1.0',
    enabled: true,
    installDate: '2024-01-18 14:20',
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: markRaw(Tickets),
    needApiKey: false,
    needCallback: true
  }
])

const handleToggle = (row) => {
  const status = row.enabled ? '启用' : '禁用'
  ElMessage.success(`插件已${status}`)
}

const handleConfig = (row) => {
  currentPlugin.value = row
  configDialogVisible.value = true
}

const handleUpdate = (row) => {
  ElMessageBox.confirm(`确定要更新插件 "${row.name}" 吗？`, '更新确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    ElMessage.success('插件更新成功！')
  }).catch(() => {
    ElMessage.info('已取消更新')
  })
}

const handleReinstall = (row) => {
  ElMessageBox.confirm(`确定要重新安装插件 "${row.name}" 吗？`, '重装确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('插件重装成功！')
  }).catch(() => {
    ElMessage.info('已取消重装')
  })
}

const handleUninstall = (row) => {
  ElMessageBox.confirm(`确定要卸载插件 "${row.name}" 吗？卸载后数据将被清除！`, '卸载确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    const index = installedPlugins.value.findIndex(p => p.id === row.id)
    if (index !== -1) {
      installedPlugins.value.splice(index, 1)
      ElMessage.success('插件卸载成功！')
    }
  }).catch(() => {
    ElMessage.info('已取消卸载')
  })
}

const handleCheckUpdate = () => {
  ElMessage.success('所有插件已是最新版本')
}

const handleSaveConfig = () => {
  ElMessage.success('配置保存成功')
  configDialogVisible.value = false
}
</script>

<style scoped>
.plugin-manage-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.plugin-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plugin-icon-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>

